<template>
  <div style="position: relative;">
    <transition-group name="left">
      <div v-show="visible" class="drawer drawerLeft" key="1">
        <div class="title">
          <span>值机柜台实时开放情况</span>
          <el-button type="primary" class="newArea" @click="showAreaDialog('设置报警阈值')" :icon="Tools"></el-button>
        </div>
        <div class="content" style="height: 420px">
          <div v-for="(item,index) in analyseData" class="info" :key="index">
            <div class="area">{{ item.area }}</div>
            <div class="name">{{ item.name }}</div>
            <div class="list">
              <span v-for="(n, i) in item.door" :key="i">
                <span v-if="n==0" class="s1">{{ i+1 < 10? "0"+(i+1) : i+1 }}</span>
                <span v-if="n==1" class="s2">&nbsp;</span>
                <span v-if="n==2" class="s3">{{ i+1 < 10? "0"+(i+1) : i+1 }}</span>
              </span>
            </div>
          </div>
        </div>
        <el-divider style="width: 95%; margin: auto; padding: 0 ; margin-top:18px;" />
        <div class="content">
          <FilterBar
            ref="FilterSearchRef"
            :close-collapse="true"
            :hasButton="false"
            :filters="checkInOptions"
            @on-toggle="(val: any) => $emit('on-toggle', val)"
            style="margin:10px 0"
          />
          <table-common
            :columns="checkInyColumns"
            :loading="loading"
            stripe
            :height="250"
            :pagination="false"
            :table-data="checkInData1"
            size="small"
            @current-change="changeCurrent"
            @size-change="changePageSize"
          >
            <template #checkIn="{ row }">
              <div style=" cursor:pointer; " @click="goToPoint(row)">{{row.checkIn }}</div>
            </template>
            <template #count="{ row }">
              <div
                v-if="row.count > lineNum "
                style="color: red;  cursor:pointer;  weight:80px"
                @click="goToPoint(row)"
              >{{row.count }}</div>
              <div style=" cursor:pointer; " v-else @click="goToPoint(row)">{{row.count }}</div>
            </template>
            <template #action="{ row }">
              <!-- 自定义操作栏示例  -->
              <el-button class="link-btn" @click="handleEdit(row)" link type="primary">查看</el-button>
            </template>
          </table-common>
        </div>
      </div>
      <img
        :class="visible == true ? 'btn_a btnLeft btn' : 'btn_b btnLeft btn'"
        :src="visible == true ? image.arrowLeft : image.arrowRight"
        key="2"
        style="float: left; padding-left: 3px; padding-right: 3px ; object-fit: contain;"
        @click="visible = !visible"
      />
      <el-radio-group
        v-model="layer"
        :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'"
      >
        <el-radio-button
          v-for="area in areaDetail"
          :key="area"
          :label="area.buildName"
          @change="showFloor(area.floorDesc)"
        >{{ area.buildName }}</el-radio-button>
      </el-radio-group>
      <el-radio-group
        v-model="subLayer"
        v-if="hasSub"
        :class="visible == true ? 'btn_d subLayer' : 'btn_c subLayer'"
      >
        <el-radio-button
          v-for="(area,index) in subLayers"
          :key="index"
          :label="area.buildName"
          @change="switchMap(area.name)"
        >{{ area.buildName }}</el-radio-button>
      </el-radio-group>
      <div
        :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'"
        style="top: calc(90vh - 22px);"
      >
        <span style="margin-top:3px;color:#fff">热力图</span>
        <el-switch v-model="heating" class="ml-2" @change="drawHeatMap(heating)" />
      </div>

      <div
        :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'"
        style="top: calc(8vh - 22px); "
      >
        <div
          v-for="( item , index) in analyseData"
          :key="index"
          style="background:#fff;  border-radius:5px; margin-right:20px ; width:100px;"
        >
          <el-button type="primary" style="margin-right:10px">
            <el-icon>
              <Tools />
            </el-icon>
          </el-button>
          {{ item.area }}
        </div>
      </div>
    </transition-group>
    <!-- 右边弹出 -->
    <transition-group name="right">
      <div v-show="visibleRight" class="drawer drawerRight" key="1">
        <div class="title">
          <span style="font-weight:bold">排队人数警告</span>
          <el-radio-group
            v-model="layer"
            :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'"
            style="margin-left: 280px;"
          >
            <el-radio-button label="T3" />
            <el-radio-button label="T5" />
          </el-radio-group>
        </div>
        <div class="content">
          <FilterBar
            ref="FilterRef"
            :close-collapse="true"
            :hasButton="true"
            :filters="trolleyOptions"
            @search-change="onSearchright"
            @search-reset="onResetright"
            @on-toggle="(val: any)=>$emit('on-toggle',val)"
          />
        </div>
        <el-divider style="width: 90%; margin: auto; padding: 0" />
        <div class="title">
          <div class="alamList">
            <div v-for="(item,index) in filteredData" class="listDiv" :key="index">
              <el-image
                style="width: 115px; height: 120px; border-radius: 8px; float: left"
                :src="item.path"
              />
              <div style="float: left; border: 0; width: 220px; margin-left: 10px">
                <div
                  style="font-weight: bolder; font-size: 18px; line-height: 20px"
                >{{ item.title }}</div>
                <div class="msg">告警区域： {{ item.alamArea }}</div>

                <div class="msg">发生时间： {{ item.time }}</div>

                <div class="msg">监控来源： {{ item.source }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <img
          :class="
            visibleRight == true ? 'btn_f btnRight btn' : 'btn_e btnRight btn'
          "
          :src="visibleRight == true ? image.arrowRight : image.arrowLeft"
          key="2"
          style="float: left; padding-left: 3px; padding-right: 3px; object-fit: contain; "
          @click="visibleRight = !visibleRight"
        />
      </div>
      <div :class="visibleRight == true ? 'mapLegend_a mapLegend' : 'mapLegend_b mapLegend'">
        <span>图例</span>
        <!-- <span v-if="!visibleRight">图例</span>
        <el-switch v-model="visibleRight" class="sw" size="small" v-if="!visibleRight" />-->
        <div>
          开放
          <div class="legend" style="background: #bad4fb; border: 1px solid #2F7DF1;" />
        </div>
        <div>
          未开放
          <div class="legend" style="background: #cfcece; border: 1px solid #aaa9a9;" />
        </div>
        <div>
          选中
          <div class="legend" style="background: #fbdbb0; border: 1px solid #f59f2e;" />
        </div>
        <div>
          人流预警
          <div class="legend" style="background: #f8a99f; border: 1px solid #eb503c;" />
        </div>
      </div>
    </transition-group>
    <!-- 中间的消息框-->
    <div style="position: absolute;
    top:750px; left:800px ">
      <el-tooltip :visible="!showDialogVisible" class="box-item" effect="light" placement="top">
        <template #content>
          <div
            style="font-size: 14px; cursor: pointer;"
            @click="showDialogVisible = !showDialogVisible"
          >
            <div
              style="padding: 0 10px 0 10px;
               margin: 10px 0;
               height: 10px;
               line-height: 10px;"
            >K区值机柜台10排队人数超过阈值！</div>
          </div>
        </template>
        <div class="item-red"></div>
      </el-tooltip>
      <el-tooltip :visible="showDialogVisible" effect="light" placement="top">
        <template #content>
          <div>
            <div
              style="font-size: 14px; cursor: pointer;user-select: none;"
              @click="showDialogVisible = !showDialogVisible"
            >
              <div
                style="padding: 0 10px 0 10px;
               border-left: #2F7DF1 solid 2px;
               margin: 10px 0;
               height: 10px;
               line-height: 10px;"
              >排队人数预警!</div>
              <div style="margin-top: 10px;padding: 0 10px 0 10px;font-size: 13px;">
                <span style="display: inline-block;">告警区域:</span>
                <p style="display: inline-block;padding-left: 20px;">T3航站楼 F2 A区</p>
              </div>
              <div style="margin: 10px 0px;padding: 0 10px 0 10px;font-size: 13px;">
                <span style="display: inline-block;">告警位置:</span>
                <p style="display: inline-block;padding-left: 20px;">安检通道A03</p>
              </div>
              <div style="margin: 10px 0px;padding: 0 10px 0 10px;font-size: 13px;">
                <span style="display: inline-block;">排队人数:</span>
                <p style="display: inline-block;padding-left: 20px;">31</p>
              </div>
              <div style="margin-top: 10px;padding: 0 10px 0 10px;font-size: 13px;">
                <span style="display: inline-block;">发生时间:</span>
                <p style="display: inline-block;padding-left: 20px;">2023-03-03 13:40</p>
              </div>
            </div>
          </div>
          <div>
            <div style="float: left;width:200px;margin-left:220px;margin-top:-110px">
              <div
                style="padding: 0 10px 0 10px;
               border-left: #2F7DF1 solid 2px;
               margin: -20px 0 10px 0;
               height: 10px;
               line-height: 10px;"
              >排队人数预警!</div>
              <div style="float:left; font-size:24px;margin-left:180px; margin-top:-30px">
                <el-icon color="#CCCCCC" @click="closeEdit()" style=" cursor:pointer;">
                  <Close />
                </el-icon>
              </div>
              <div style="width:200px; background:pink;height:110px"></div>
            </div>
          </div>
        </template>
        <div class="item-red"></div>
      </el-tooltip>
    </div>
  </div>

  <!-- <map-control @mapClick="mapClick"></map-control> -->
  <map-control @mapLoad="mapLoadEvent" @mapClick="mapClick" />

  <!-- 顶部弹窗 -->
  <edit-dialog
    class="dialog"
    :centerDialogVisible="showAreaDialogVisible"
    :tilte="title"
    :key="timer"
    :defaultButton="false"
    :closeOnClickModal="false"
    :myModal="false"
    :width="360"
  >
    <template #content>
      <FilterBar
        ref="FilterRef"
        :close-collapse="true"
        :filters="areaOptions"
        :hasButton="false"
        :hasTableButton="hasTableButton"
        @search-change="onSearch"
        d
        @search-reset="onReset"
        @on-toggle="(val: any)=>$emit('on-toggle',val)"
      />
    </template>
    <template #custom>
      <span class="dialog-footer">
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="Submit">保存</el-button>
      </span>
    </template>
  </edit-dialog>
</template>
<script lang="ts" setup>
import FilterBar from "@/components/FilterBar/index.vue";
import { ref, onBeforeMount, nextTick } from "vue";
import TableCommon from "@/components/TableCommon/index.vue";

import editDialog from "@/components/editDialog/index.vue";
import { checkInyColumns } from "@/views/keynote/checkIn/config/columns";
import {
  areaOptions,
  trolleyOptions,
  checkInOptions
} from "@/views/keynote/checkIn/config/filters";
import { ElMessage } from "element-plus";
import { areaDetail } from "@/config/config";
import { usePagination } from "vue-request";
// 以下3个为地图控件相关的组件
import mapControl from "@/components/map/index.vue";
import { store } from "@/components/map/mapStore";
import { image } from "@/assets/index";
import { Tools } from "@element-plus/icons-vue";
const showAreaDialogVisible = ref(false);
const heating = ref();
const timer = ref();
const visible = ref(false);
const visibleRight = ref(false);
// 用于保存机场层级
const layer = ref();
// 用于保存选择的机场子层级
const subLayer = ref();
// 用于保存机场子层级数组
const subLayers = ref([]);
// 是否显示机场子层级
const hasSub = ref(false);
const title = ref("");
// 最大排队人数
const lineNum = ref(16);
// 用于保存地图坐标及相关信息
const mapPoint = ref({});
const showDialogVisible = ref(false);
const closeEdit = () => {
  showDialogVisible.value = false;
};
// 热力图
const drawHeatMap = heating => {
  if (heating) {
    // 模拟数组，实际开发换成接口返回的数组数据
    const array = [];
    // 随机生成2000个坐标点
    for (let i = 0; i < 2000; i++) {
      const x = Math.random() * 800 + 136675.54999719388;
      const y = Math.random() * 600 + 40314.37943610105;
      const o = {};
      // 为每一个坐标点添加随机数值
      o.count = Math.floor(Math.random() * 50);
      o.x = x;
      o.y = y;
      array.push(o);
    }
    // 将模拟数组放入对应的方法
    store.BASE.drawHeatMap(array);
  } else {
    store.BNHeatMap.clear();
  }
};
// 地图点击事件--本页面暂未使用，留着备份
const mapClick = (evt: any) => {
  // 点位坐标 longitude：evt.mapPoint.x  latitude：evt.mapPoint.y
  // 区域字段在地图数据中暂时没有
  // 移除临时图层
  store.BNMap.removeGraphicsLayer("clickLayer");
  // 向地图添加临时图层
  const clickLayer = store.BNMap.creatGraphicsLayer({ id: "clickLayer" });
  clickLayer.removeAll();
  // 创建点
  const point = store.BNMap.createPoint({
    x: evt.mapPoint.x,
    y: evt.mapPoint.y,
    spatialReference: evt.mapPoint.spatialReference
  });
  // store.BNMap.setCenter(point);
  // 创建图片
  const symbolStyle = store.BNSymbol.PictureMarkerSymbol(image.point, 20, 25);
  // 创建要素
  const picgraphic = store.BNMap.graphic(point, symbolStyle);
  // 添加到地图
  clickLayer.add(picgraphic);
  store.BNMap.addGraphicsLayer(clickLayer);
  // 将相关信息保存到变量
  mapPoint.value.x = evt.mapPoint.x;
  mapPoint.value.y = evt.mapPoint.y;
  // 地图区域值暂时为空
};
/**
 *
 * @param row 传过来的当前行
 * 通过传过来的行进行绘制相应的点
 */
const goToPoint = (row: any) => {
  store.BNMap.setCenter(row.checkPoint.x, row.checkPoint.y);

  store.BNMap.removeGraphicsLayer("goToPointLayer");
  // 向地图添加临时图层
  const goToPointLayer = store.BNMap.creatGraphicsLayer({
    id: "goToPointLayer"
  });
  goToPointLayer.removeAll();
  // 创建点,
  const point = store.BNMap.createPoint({
    x: row.checkPoint.x,
    y: row.checkPoint.y,
    spatialReference: store.BNMap.spatialReference
  });
  // 创建图片
  const symbolStyle = store.BNSymbol.PictureMarkerSymbol(image.point, 20, 25);
  // 创建要素
  const picgraphic = store.BNMap.graphic(point, symbolStyle);
  // 添加到地图
  goToPointLayer.add(picgraphic);

  store.BNMap.addGraphicsLayer(goToPointLayer);
};

/**
 *
 * @param data
 * 点击查看
 */
const handleEdit = (data: any) => {
  drawPointOnMap(data.checkPoint);
};

/**
 *
 * @param condition 传过来的点
 * 通过传过来的点进行相应的点的地图弹窗
 */
const drawPointOnMap = (condition: any) => {
  store.BNMap.setCenter(condition.x, condition.y);
  store.BNMap.removeGraphicsLayer("pointLayer");
  // 向地图添加临时图层
  const pointLayer = store.BNMap.creatGraphicsLayer({ id: "point" });
  pointLayer.removeAll();
  // 创建点,
  const point = store.BNMap.createPoint({
    x: condition.x,
    y: condition.y,
    spatialReference: store.BNMap.spatialReference
  });

  const html = `<div style="width:100%;">
          <div style="padding: 0 10px 0 10px;
               border-left: #2F7DF1 solid 2px; 
               margin: 10px 0 10px 0;
               height: 10px;
               line-height: 10px;">摄像头A01
          </div>
          <div style="width:100%; background:pink;height:200px"></div>
         
        </div>`;
  // 设置弹窗内容
  store.BNWindows.setTitle("基本信息");
  store.BNWindows.setContent(html);

  // 设置弹窗大小
  store.BNWindows.resize(280, 360);
  store.BNWindows.show(point);
  store.BNMap.addGraphicsLayer(pointLayer);
};

const mapLoadEvent = () => {
  ElMessage({
    message: "地图加载成功",
    type: "success"
  });
};
const showFloor = (val: string[]) => {
  if (val !== undefined) {
    subLayers.value = val;
    hasSub.value = true;
  } else {
    hasSub.value = false;
  }
};
const switchMap = (name: string) => {
  store.BNMap.switchDCJ(name, (evt: any) => {
    // 一般为调用setCenter和setLevel方法
  });
};

/**
 *
 * @param val  弹窗的标题
 * @param data 弹窗的值
 */
const showAreaDialog = (val, data) => {
  timer.value = new Date().getTime();
  title.value = val;
  showAreaDialogVisible.value = true;
  nextTick(() => {
    FilterRef.value.setFieldsValue({
      minThreshold: lineNum.value
    });
  });
};

// 7-27新增用于接收弹窗组件值的ref对象
const FilterRef = ref();
const FilterSearchRef = ref();
// 值机柜数据
const checkInData = ref([
  {
    id: "1",
    checkIn: "301",
    count: "18",
    checkPoint: {
      x: 136511.11112664946,
      y: 41147.024851391856
    }
  },
  {
    id: "2",
    checkIn: "304",
    count: "15",
    checkPoint: {
      x: 136178.79379534812,
      y: 40077.5768791626
    }
  },
  {
    id: "3",
    checkIn: "305",
    count: "13",
    checkPoint: {
      x: 137079.70184716422,
      y: 40023.33718734988
    }
  },
  {
    id: "4",
    checkIn: "308",
    count: "11",
    checkPoint: {
      x: 137064.3559831392,
      y: 40725.01359070268
    }
  }
]);
// 值机柜展示数据
const checkInData1 = ref();
checkInData1.value = checkInData.value;
/**
 * 值机柜展示数据模糊查询
 */
checkInOptions.forEach(e => {
  if (e.prop === "checkIn") {
    e.events.change = value => {
      const regex = new RegExp(value, "i");
      checkInData1.value = checkInData.value.filter(e => {
        return regex.test(e.checkIn);
      });
    };
  }
});

// 告警区域：
const alamData = ref([
  {
    id: "1",
    title: "K区203排队人数告警",
    alamArea: "T3航站楼 F3 K区",
    time: "2023-03-03 13:40",
    source: "0023号摄像头",
    path: "",
    count: ""
  },
  {
    id: "2",
    title: "M区103排队人数告警",
    alamArea: "T3航站楼 F3 A区",
    time: "2023-06-03 13:40",
    source: "0023号摄像头",
    path: "",
    count: ""
  },
  {
    id: "3",
    title: "L区100排队人数告警",
    alamArea: "T3航站楼 F3 A区",
    time: "2023-08-15 13:40",
    source: "0023号摄像头",
    path: "",
    count: ""
  }
]);
// 告警区域展示数据
const filteredData = ref({});
filteredData.value = alamData.value;
// 属性名称和值根据实际接口情况进行处理
const analyseData = ref([
  {
    id: "1",
    area: "G区",
    name: "国泰-港龙航空",
    door: [0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 2]
  },
  {
    id: "2",
    area: "J区",
    name: "春秋航空",
    door: [0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0]
  },
  {
    id: "3",
    area: "K区",
    name: "东方航空",
    door: [2, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0]
  },
  {
    id: "4",
    area: "L区",
    name: "上海航空",
    door: [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1]
  },
  {
    id: "5",
    area: "M区",
    name: "南方航空",
    door: [0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0]
  },
  {
    id: "6",
    area: "N区",
    name: "头等舱、公务舱及贵宾办票区",
    door: [0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1]
  }
]);

const Service = (data: ListParams) => {
  return new Promise(resolve => {
    trolleyOptions.forEach(e => {
      if (e.prop === "type") {
        // 这部分数据应该由接口获取
        // 刚进入页面和点击清空时，应把选择情况清空
        e.inputProps.options = [
          { label: "全部", value: 1 },
          { label: "禁入区", value: 2 },
          { label: "允许进入区", value: 3 }
        ];
        // 手动重写单选按钮点击事件
      }
    });
    areaOptions.forEach(e => {
      if (e.prop === "drawArea") {
        // 手动重写单选按钮点击事件
        e.events.click = function() {
          draw("polygon");
        };
      }
    });
    // 模拟数据写入，实际开发使用接口数据写入
    setTimeout(() => {
      const response = {
        params: data,
        data: {
          list: [],
          total: 5
        }
      };
      resolve(response);
    }, 500);
  });
};
// =============模拟接口数据==END
const {
  run,
  loading,
  current,
  pageSize,
  changeCurrent,
  changePageSize
} = usePagination(Service, {
  manual: true,
  pagination: {
    currentKey: "pageNum",
    pageSizeKey: "pageSize",
    totalKey: "data.total"
  }
});
const search = ref<FilterDataType>({});
// 获取数据
const getData = () => {
  const params = {
    pageNum: current.value,
    pageSize: pageSize.value,
    condition: search.value
  };
  run(params);
};

areaOptions.forEach(e => {
  if (e.prop == "minThreshold") {
    e.events.change = (value, evt) => {
      if (value < 1) {
        nextTick(() => {
          FilterRef.value.setFieldsValue({
            minThreshold: 1
          });
        });
         ElMessage.error('排队人数至少1')
      }
    };
  }
});
/**
 *
 * @param data
 * 保存按钮
 * 保存时改变lineNum排队人数
 */
const Submit = () => {
  showAreaDialogVisible.value = false;

  lineNum.value = FilterRef.value.getParams().minThreshold;
  console.log(FilterRef.value);
};
/**
 * 取消按钮时关闭弹窗
 */
const Cancel = () => {
  showAreaDialogVisible.value = false;
};
/**
 * 清除时对告警区域展示数据进行复原
 */
const onResetright = () => {
  filteredData.value = alamData.value;
};
/**
 *
 * @param data  查询的值
 * 告警区域展示数据进行模糊查询
 */
const onSearchright = (data: FilterDataType) => {
  let startTime = "";
  let endTime = "";
  if (data.date2) {
    startTime = data.date2[0];
    endTime = data.date2[1];
  }
  filteredData.value = alamData.value.filter(item => {
    // const itemDate = new Date(item.time); // 将项中的时间字符串转换为日期对象
    const regex = new RegExp(data.alamArea, "i"); // 创建不区分大小写的正则表达式
    let dateMatch = true;
    if (startTime) {
      dateMatch = item.time >= startTime && item.time <= endTime; // 检查时间是否在指定范围内
    }
    const areaMatch = regex.test(item.alamArea); // 检查 alamArea 是否匹配关键词
    return dateMatch && areaMatch;
  });
};
onBeforeMount(getData);
</script>

<style lang="less" scoped>
.main-view {
  &::-webkit-scrollbar {
    display: none;
  }
}
.dialog {
  pointer-events: none;
}
.dialog /deep/ .el-dialog {
  pointer-events: auto;
  position: absolute;
  left: 640px;
  top: 140px;
}
</style>
<style lang="less" scoped>
/* 进入动画 */
.left-enter-active {
  animation: move 1s;
  animation-timing-function: linear;
}
.left-leave-active {
  animation: move 1s reverse;
  animation-timing-function: linear;
}

@keyframes move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translate(0);
  }
}
.right-enter-active {
  animation: move-right 1s;
  animation-timing-function: linear;
}
.right-leave-active {
  animation: move-right 1s reverse;
  animation-timing-function: linear;
}

@keyframes move-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translate(0);
  }
}

.drawer {
  height: 840px;
  padding: 10px 0;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 999;
  background-color: #fff;
  float: left;
}
.drawerRight {
  width: 400px;
  position: absolute;
  top: 0;
  right: 10px;
}
.drawerLeft {
  width: 320px;
  position: absolute;
  top: 0;
  left: 0;
}
.drawer > .title {
  line-height: 32px;
  height: 32px;
  margin-bottom: 10px;
  padding-right: 15px;
  span {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    border-left: #2f7df1 2px solid;
    text-indent: 1em;
  }
  .newArea {
    float: right;
  }
  .titleNumMsg {
    text-indent: 1em;
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    display: block;
    .num {
      display: inline-block;
      float: left;
      padding-right: 9px;
      span {
        text-indent: 5px;
        height: 20px;
        margin-top: -3px;
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        line-height: 20px;
        font-weight: bolder;
        border: 0;
        color: #2f7df1;
      }
    }
    .num:not(:first-child) {
      border-left: 1px solid #ddd;
    }
  }
}
.dialog {
  /deep/ .el-form-item__label {
    text-align: left;
    width: 130px !important;
  }
}
.drawer > .content {
  line-height: 32px;
  height: 100px;
  margin-bottom: 0px;
  padding: 0 10px 0px;
  position: relative;
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .filter-wrapper {
    display: inline-block;
    margin-top: 5px;
  }
  /deep/ .button-group {
    width: 200px;
    position: absolute;
    top: 47px;
    left: 170px;
  }
  /deep/ .el-form-item__label {
    text-align: right;
    margin-right: 10px;
    width: 75px !important;
    padding: 0;
    display: inline-block;
  }
}
.alamList {
  padding: 15px 0 15px 15px;
  height: 580px;
}
.info {
  border: 1px solid #a9c5f9;
  border-radius: 8px;
  width: 280px;
  height: 45px;
  font-size: 14px;
  padding: 10px;
  margin-bottom: 5px;
  line-height: 16px;
  .area {
    float: left;
    color: #2e7cf3;
    width: 30px;
    font-weight: bolder;
  }
  .name {
    width: 250px;
    float: left;
  }
  .list {
    width: 100%;
    margin-top: 25px;
    span {
      margin-right: 2px;
      color: #2e7cf1;
      line-height: 18px;
      span {
        height: 18px;
        display: inline-block;
        text-align: center;
        border-radius: 3px;
        font-size: 10px;
      }
      .s1 {
        width: 20px;
        border: 1px solid #a9c5f9;
        background-color: #d2e3fc;
      }
      .s2 {
        width: 10px;
        border: 1px solid #dadada;
        background-color: #ededed;
      }
      .s3 {
        width: 20px;
        border: 1px solid #d9001b;
        background-color: #f5bec4;
        color: #d9001b;
      }
      span:hover {
        border: 1px solid #f59a23;
        background-color: #fde5c7;
        cursor: pointer;
      }
    }
  }
}
.listDiv {
  border: #d7d7d7 1px solid;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px;
  max-height: 120px;
  overflow-y: hidden;
  margin-bottom: 10px;

  .top {
    width: 100%;
    height: 24px;
    line-height: 24px;
    vertical-align: center;
  }

  .top span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-indent: 5px;
    float: left;
    border: 0;
  }
}
.subLayer {
  position: absolute;
  width: 35px;
  top: 50px;
  border: 0;
  z-index: 2;
}
.subLayer /deep/ .el-radio-button .el-radio-button__inner {
  width: 35px;
  border: 1px #fff solid;
  padding: 10px;
}
.subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px 6px 0 0;
}
.subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 0 6px 6px;
}
.mapLegend {
  padding: 10px;
  width: 145px;
  background: #fff;
  border-radius: 8px;
  position: absolute;
  transition: right 1s;
  font-size: 12px;
  transition-timing-function: linear;
  .sw {
    margin-top: 5px;
  }
  div {
    margin-bottom: 8px;
    line-height: 24px;
    .legend {
      float: right;
      border-radius: 4px;
      width: 62px;
      height: 22px;
    }
    .blue {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: #b6e5fb;
      border: 1px solid #0aaaf0;
      width: 18px;
      height: 18px;
    }
    .red {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: red;
      width: 20px;
      height: 20px;
    }
  }
  span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    margin-right: 2px;
  }
  span:first-child {
    font-weight: bolder;
    width: 60px;
    margin-top: 2px;
    border-left: 2px solid #2f7df1;
    text-indent: 10px;
  }
}
.mapLegend_a {
  height: 150px;
  right: 420px;
  top: calc(74vh - 22px);
}
.mapLegend_b {
  height: 150px;
  right: 10px;
  top: calc(74vh - 22px);
}
.btnLayer {
  position: absolute;
  top: 10px;
  border: 0;
  transition: left 1s;
  transition-timing-function: linear;
}
.btn {
  width: 15px;
  height: 50px;
  position: absolute;
  top: 350px;
  border: 0;
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
}
.btnRight {
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
}
.btn_e {
  right: 0;
}
.btn_f {
  right: 410px;
}
.btnLeft {
  border-radius: 0 8px 8px 0;
  transition: left 1s;
  transition-timing-function: linear;
}
.btn_d {
  animation: move 0s reverse;
  left: 340px;
  display: flex;
  margin-left: 10px;
}
.btn_c {
  animation: move 0s reverse;
  left: 10px;
  display: flex;
  margin-left: 10px;
}
.btn_b {
  left: 0;
}
.btn_a {
  left: 330px;
}
// .box-item{
//   position: absolute;
//   top: 300px;
//   // margin-top: 300px;
// }
</style>
